const app = new Vue({
    el: "#justOneDay",
    template:`
        <div class="justOneDay">
            <div class="justOneDay__inner">
                <div class="justOneDay__header">
                    <h1 class="just1day__title">
                        <img src="//fiximage.10x10.co.kr/web2018/main/tit_just_1day_v2.png?v=1.1" alt="just 1 dat">
                    </h1>
                    <p class="justOneDay__integrated" :class="{ 'justOneDay__integrated--add': justOneDay.products.length >= 4 }">
                        <strong>{{ justOneDay.discountText }}</strong>SALE
                    </p>
                    <div class="time-box">
                        <div class="time">
                            <span class="time__clock"></span>
                            <span id="countdown" class="time__countdown">{{ countdownTime }}</span>
                        </div>                  
                        <div class="timer">                            
                            <div id="timerBar" class="timer__bar">       
                                <span class="timer__bar--lottie"></span>
                            </div>
                        </div>
                    </div>  
                </div>
                <ul class="justOneDay__container">
                    <li 
                        v-for="(item, index) in justOneDay.products"
                        class="justOneDay__list"
                        :class="{ 'justOneDay__list--add': justOneDay.products.length >= 4 }"
                        @click="moveToItem(item.id)"
                    >
                        <div class="justOneDay__thumbnail"><img :src="item.image" alt="item.title"></div>
                        <p v-html="item.title " class="justOneDay__itemName" />
                        <div class="priceBox">
                            <span class="justOneDay__percent">{{ item.discountText }}</span>
                            <span class="justOneDay__price">{{ item.priceText }}</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    `,
    data() {
        return {
            countdownTime: '',
            justOneDay: []
        }
    },
    created() {
        this.updateCountdown();
        this.countdownInterval = setInterval(this.updateCountdown, 1000);
    },
    beforeDestroy() {
        clearInterval(this.countdownInterval);
    },
    mounted() {
        this.getJustOneDay();
    },
    methods: {
        updateCountdown() {
            const now = new Date();
            const nextMidnight = new Date();
            nextMidnight.setHours(23, 59, 59, 0);

            const timeDifference = nextMidnight - now;
            const hours = String(Math.floor((timeDifference / (1000 * 60 * 60)) % 24)).padStart(2, '0');
            const minutes = String(Math.floor((timeDifference / (1000 * 60)) % 60)).padStart(2, '0');
            const seconds = String(Math.floor((timeDifference / 1000) % 60)).padStart(2, '0');

            this.countdownTime = `${hours}:${minutes}:${seconds}`;
        },
        async getJustOneDay() {
            try {
                // const response = await fetch(`http://gateway.dev.10x10aws.net/cache/apis/product/just1day/PC`);
                const response = await fetch(`https://gateway.10x10.co.kr/cache/apis/product/just1day/PC`);
                if (response.ok) {
                    const json = await response.json();
                    if (json.status === 200) {
                        this.justOneDay = json.result;
                        console.log(this.justOneDay)
                    }
                }
            } catch (e) {}
        },
        moveToItem(itemId) {
            location.href = 'shopping/category_prd.asp?itemid=' + itemId;
        }
    },
});